<template>
  <div class="fullscreen flex flex-center row justify-center container">
    <div class="col-xl-3 col-lg-4 col-md-5 col-sm-7 col-xs-10">
      <div class="content-container">
        <div class="content">
          <q-card-section
            flat
            bordered
          >
            <q-card-section>
              <img
                src="/images/logo.png"
                alt="流年后台管理系统"
              >
            </q-card-section>

            <q-card-section>
              <q-form
                class="q-gutter-md"
                @reset="onReset"
                @submit.prevent.stop="login"
              >
                <q-input
                  filled
                  hide-bottom-space
                  v-model="account.UserName"
                  label="用户名/UID"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || '请输入用户名']"
                  name="UserName"
                />

                <q-input
                  filled
                  hide-bottom-space
                  type="password"
                  v-model="account.Password"
                  label="密码/Password"
                  lazy-rules
                  :rules="[val => val !== null && val !== '' || '请输入密码']"
                  name="Password"
                />
                <q-separator dark />
                <q-card-actions class="q-gutter-y-md q-pa-none q-mt-none">
                  <div class="col-xs-12 col-sm-5 col-md-7 col-lg-6">
                    <q-btn
                      label="登录"
                      type="submit"
                      unelevated
                      color="primary"
                      icon="mdi-check-circle-outline"
                      align="between"
                      class="full-width"
                    />
                  </div>
                  <div class="col" />
                  <div class="col-xs-12 col-sm-5 col-md-4 col-lg-5">
                    <q-btn
                      label="清空"
                      type="reset"
                      color="grey-4"
                      icon="mdi-refresh"
                      text-color="grey-8"
                      unelevated
                      align="between"
                      class="full-width"
                    />
                  </div>
                </q-card-actions>

              </q-form>
            </q-card-section>

          </q-card-section>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapMutations } from 'vuex'

export default {
  components: {},
  props: {},
  data () {
    return {
      account:{
        UserName: '',
        Password: ''
      },
      _userToken: '',
      _userName: '',
      _userRoles: '',
      _theme:''
  }
  },
  methods: {
    ...mapMutations(['changeLogin', 'clearLogin']),
    login(evt) {
      const params = this.$utils.formatFormData(evt)
      this.$api.Account('login', params).then( result => {
        // console.log(result)
        this._userToken = 'Ap ' + result.token
        this._userName = result.UserName
        this._userRoles = result.roles
        this._theme = result.theme
        // 将用户token保存到vuex中
        this.changeLogin({ Authorization: this._userToken, Author: this._userName, Roles: this._userRoles, Theme: this._theme })
        // 路由跳转
        this.$router.push('/Dashboard')
        this.account.UserName = ''
        this.account.Password = ''
      }).catch( err => {
        // this.$utils.notify('用户名或密码错误','red-8')
        console.log(err)
        // console.log(err.response)
        this.$utils.notify(err.response.data.Message, 'red-8')
      })
    },
    onReset() {
      this.UserName = ''
      this.Password = ''
      this.changeLogin({ Authorization: '', Author: '', Roles: '' })
      this.clearLogin()
    },
  },
  created() {
    this.onReset()
  },
}
</script>
<style scoped>
.container {
  background-image: url("~assets/bg-login.jpg");
  background-position: center center;
}
.content-container {
  background: rgba(255, 255, 255, 0.4);
  padding: 1em;
  border-radius: 5px;
}
.content {
  background: #fff;
}
</style>
